<template>
  <div class="app-container">
    <!-- nzf-流程 -->
    <el-form :model="pageConfig.queryParams" ref="queryForm" :inline="true" v-show="pageConfig.showSearch" label-width="95px">
      <el-form-item label="机构名称" prop="deptName">
        <el-input v-model="pageConfig.queryParams.deptName" placeholder="请输入机构名称" clearable @keyup.enter="handleQuery" style="width: 200px" />
      </el-form-item>
      <el-form-item label="联系人" prop="leader">
        <el-input v-model="pageConfig.queryParams.leader" placeholder="请输入联系人" clearable @keyup.enter="handleQuery" style="width: 200px" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="pageConfig.queryParams.phone" placeholder="请输入手机号" clearable @keyup.enter="handleQuery" style="width: 200px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['flow:info:add']">申请</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAddTemplate">创建模版</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleUsingTemplates">使用模版</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="pageConfig.showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="pageConfig.loading" :data="pageConfig.expertInfoList" border>
      <el-table-column type="index" width="95" label="序号" align="center" />
      <el-table-column label="机构名称" align="center" prop="deptName" width="200" />
      <el-table-column label="手机号" align="center" prop="phone" width="120" />
      <el-table-column label="联系人" align="center" prop="leader" width="120" />
      <el-table-column label="地址" align="center" prop="address" />
      <el-table-column label="所属地区" align="center" prop="address" />
      <el-table-column label="申请产业类型" align="center" prop="industryType">
        <template #default="scope">
          <dict-tag :options="industry_type" :value="scope.row.industryType" />
        </template>
      </el-table-column>
      <el-table-column label="申请类型" align="center" prop="flowType">
        <template #default="scope">
          <dict-tag :options="audit_type" :value="scope.row.flowType" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
        <template #default="scope">
          <!-- H 后面那个步骤 L （上传证书）才是结束-->
          <el-button link type="primary" icon="Connection" @click="handleViewDetails(scope.row)" v-if="scope.row.flowNode != 'H'">办理</el-button>
          <br />
          <el-dropdown teleported>
            <span class="el-dropdown-link">
              历史记录<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <!-- 只能监管看  && userRoles.includes(100) -->
                <el-dropdown-item v-if="isCurrentLessThanProcess(scope.row, 'B')">
                  <el-button link type="primary" icon="Connection" @click="handleDesignatedExperts(scope.row)" v-hasPermi="['lowIfnfo:info:regulatoryDesignatedExperts']">评审专家</el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="isCurrentLessThanProcess(scope.row, 'C')">
                  <el-button link type="primary" icon="Connection" @click="handleOnlineApproval(scope.row)" v-hasPermi="['lowIfnfo:info:onlineApproval']">书面审核</el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="isCurrentLessThanProcess(scope.row, 'D')">
                  <el-button link type="primary" icon="Connection" @click="handleOnlineApprovalResults(scope.row)" v-hasPermi="['lowIfnfo:info:onlineApprovalResults']">书面审核结果</el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="isCurrentLessThanProcess(scope.row, 'E')">
                  <el-button link type="primary" icon="Connection" @click="handleOfflineDesignation(scope.row)" v-hasPermi="['lowIfnfo:info:offlineDesignation']">线下评审</el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="isCurrentLessThanProcess(scope.row, 'E') && !userRoles.includes(102)">
                  <el-button link type="primary" icon="Connection" @click="handleOfflineDesignatedExpertResults(scope.row)" v-hasPermi="['lowIfnfo:info:offlineDesignatedExpertResults']"
                    >线下评审记录</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item v-if="isCurrentLessThanProcess(scope.row, 'F')">
                  <el-button link type="primary" icon="Connection" @click="handleHandleOfflineDesignation(scope.row)" v-hasPermi="['lowIfnfo:info:offlineApprovalAnswer']">线下评审结果</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination v-show="pageConfig.total > 0" :total="pageConfig.total" v-model:page="pageConfig.queryParams.pageNum" v-model:limit="pageConfig.queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script setup name="expertInfo">
// import { flowList } from "@/api/flowInfo/info";
const { proxy } = getCurrentInstance();
const { industry_type, audit_type } = proxy.useDict("industry_type", "audit_type");

import { reactive } from "vue";
import useUserStore from "@/store/modules/user.js";
const userStore = useUserStore();
const pageConfig = reactive({
  // 遮罩层
  loading: false,
  // 选中数组
  ids: [],
  // 子表选中数据
  checkedExpertCertificates: [],
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 显示搜索条件
  showSearch: true,
  // 总条数
  total: 0,
  // 流程表格数据
  expertInfoList: [],
  // 弹出层标题
  title: "",
  // 是否显示弹出层
  open: false,
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    deptName: "",
    leader: "",
    phone: "",
    issuingOrganization: "",
  },
  //省
  pronvinceList: [],
  // 市
  cityList: [],
  // 表单参数
  form: {},
  // 表单校验
  rules: {},
});

/** 查询列表 */
function getList() {
  pageConfig.loading = true;
  flowList(pageConfig.queryParams)
    .then((response) => {
      pageConfig.expertInfoList = response.rows;
      pageConfig.total = response.total;
    })
    .finally(() => {
      pageConfig.loading = false;
    });
}

// 默认查询列表
// getList();

/** 搜索按钮操作 */
function handleQuery() {
  pageConfig.queryParams.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryForm");
  pageConfig.queryParams = {
    pageNum: 1,
    pageSize: 10,
    provinceId: 37,
  };
  handleQuery();
}

/** 新增按钮操作 */
function handleAdd() {
  const path = "/certificatePreReview/certificateRequest";
  router.push({ path: path });
}
/* 新增模版操作 */
function handleAddTemplate() {
  const path = "/flow/formTemplates";
  router.push({
    path: path,
    query: {
      query: "",
      lang: "zh2en",
    },
  });
}
/* 使用模版操作 */
function handleUsingTemplates() {
  const path = "/flow/formTemplates";
  router.push({
    path: path,
    query: {
      query: "use",
      lang: "zh2en",
    },
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const expertIds = row.expertId || this.ids;
  proxy.$modal
    .confirm('是否确认删除流程编号为"' + expertIds + '"的数据项？')
    .then(() => {
      return delExpertInfo(expertIds);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

const router = useRouter();
// 办理 规则（跳转正在办理的页面）
function handleViewDetails(row) {
  const path = {
    B: "/certificatePreReview/designatedExperts",
    C: "/certificatePreReview/onlineApprovalProcess",
    D: "/certificatePreReview/onlineApprovalProcessResults",
    E: "/certificatePreReview/offlineDesignation",
    F: "/certificatePreReview/handleOfflineDesignation",
    G: "/certificatePreReview/handleOfflineDesignation",
  };
  if (["B", "E"].includes(row.flowNode) && !userRoles.value.includes(100)) {
    proxy.$modal.msgSuccess("监管办理中，请等待(预计一到三个工作日内完成本流程)");
    return;
  }
  //办理跳转正在办理的页面（特殊监管页面除外）
  const query = {
    flowId: row.flowId,
  };
  router.push({ path: path[row.flowNode], query });
}
// 评审专家
function handleDesignatedExperts(row) {
  const path = "/certificatePreReview/designatedExperts";
  const query = {
    flowId: row.flowId,
  };
  router.push({ path: path, query });
}

// 书面审核
function handleOnlineApproval(row) {
  const path = "/certificatePreReview/onlineApprovalProcess";
  const query = {
    flowId: row.flowId,
  };
  router.push({ path: path, query });
}
// 书面审核结果
function handleOnlineApprovalResults(row) {
  const path = "/certificatePreReview/onlineApprovalProcessResults";
  const query = {
    flowId: row.flowId,
  };
  router.push({ path: path, query });
}
// 线下评审
function handleOfflineDesignation(row) {
  const path = "/certificatePreReview/offlineDesignation";
  const query = {
    flowId: row.flowId,
  };
  router.push({ path: path, query });
}
// 线下评审记录
function handleOfflineDesignatedExpertResults(row) {
  const path = "/certificatePreReview/offlineDesignatedExpertResults";
  const query = {
    flowId: row.flowId,
  };
  router.push({ path: path, query });
}
// 线下评审结果
function handleHandleOfflineDesignation(row) {
  const path = "/certificatePreReview/handleOfflineDesignation";
  const query = {
    flowId: row.flowId,
  };
  router.push({ path: path, query });
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "/comPublicityCertificates/export",
    {
      ...pageConfig.queryParams,
    },
    `授权部门列表${new Date().getTime()}.xlsx`
  );
}
// 判断进程
function isCurrentLessThanProcess(item, currentParam) {
  // A流程
  if (item.isAll == 1 && item.flowNode == "H") {
    // 检查输入是否为单个字母
    if (/^[A-D]$/.test(currentParam)) {
      // 比较字符的 charCodeAt 值来确定顺序
      return true;
    }
    return false;
  }
  // A B流程
  else {
    // 检查输入是否为单个字母
    if (/^[A-Z]$/.test(item.flowNode) && /^[A-Z]$/.test(currentParam)) {
      // 比较字符的 charCodeAt 值来确定顺序
      return currentParam.charCodeAt(0) < item.flowNode.charCodeAt(0);
    }
    return false;
  }
}
// 用户角色
const userRoles = computed(() => {
  const roles = JSON.parse(JSON.stringify(userStore.userRoles));
  if (roles.length) {
    const name = roles.map((item) => {
      return item.roleName;
    });
    return roles.map((item) => {
      return item.roleId;
    });
  } else {
    return [];
  }
});
</script>
<style scoped lang="scss">
/* 修改弹窗颜色 */
:deep().el-dialog {
  background-color: #fafafa;
}
</style>
